<template>
  <div class="workAndSkill">
    <div class="com-top-nav">
      <van-nav-bar
        title="管理作品与技能"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="container">
      <div class="skill-container">
        <div class="slider-container">
          <p>webstrom123</p>
          <van-slider v-model="value" />
          <img @click="handleDel" class="del-icon" src="../../../../static/img/person.jpg" alt="">
        </div>
        <div class="button">
          <van-button size="large" @click="addSkill">添加技能</van-button>
        </div>
      </div>
    </div>
    <van-dialog
      v-model="showDialog"
      show-cancel-button
      class="dialog-button"
      :before-close="beforeClose"
    >
      <p style="text-align: center;padding: 10px 0">技能名称</p>
      <van-field
        v-model="name"
        type="name"
        placeholder="请输入技能名称"
      />
    </van-dialog>
  </div>
</template>
<script>
  import {Slider} from 'vant';
  import zxProgress from '../../../components/zx-progress';

  export default {
    name: 'managementSkills',
    components: {
      vanSlider: Slider,
      zxProgress
    },
    data(){
      return {
        value: 50,
        name: '',
        showDialog: false
      }
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      addSkill() {
        this.showDialog = true;
      },
      handleDel() {
        console.log('del');
      },
      beforeClose(action, done) {
        if (action === 'confirm') {
          console.log(this.name);
          setTimeout(done, 1000);
        } else {
          done();
        }
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../../../static/style/var');

  .button {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 30px;
  }

  .container {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #ffffff;
    .slider-container {
      padding: 8px 10px;
      background-color: #ffffff;
      position: relative;
      p {
        font-size: @title-font-size;
        color: @font-dault-color;
        padding: 5px 0;
      }
      .del-icon {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 10px;
        right: 10px;
      }
    }
  }

</style>
